import { Meta, ArgsTable, Canvas, Story, Markdown } from '@storybook/addon-docs';
import { useArgs } from '@storybook/client-api';
import Downshift from 'downshift';
import {
  AddItem,
  Dropdown,
  HeaderIcon,
  HeaderItem,
  Item,
  ItemMeta,
  MediaBody,
  MediaFigure,
  MediaItem,
  Menu,
  NextItem,
  PreviousItem,
  Separator,
  Trigger
} from '@zendeskgarden/react-dropdowns.legacy';
import { TriggerStory } from './stories/TriggerStory';
import { MENU_ITEMS as ITEMS } from './stories/data';
import README from '../README.md';

<Meta
  title="Packages/Dropdowns.Legacy/Menu"
  component={Menu}
  subcomponents={{
    AddItem,
    Dropdown,
    HeaderIcon,
    HeaderItem,
    Item,
    ItemMeta,
    MediaBody,
    MediaFigure,
    MediaItem,
    Menu,
    NextItem,
    PreviousItem,
    Separator,
    Trigger
  }}
/>

# API

**DEPRECATED:** use `@zendeskgarden/react-dropdowns`
[Menu](https://zendeskgarden.github.io/react-components/?path=/docs/packages-dropdowns-menu--docs)
instead.

<ArgsTable />

# Demo

<Canvas>
  <Story
    name="Menu"
    args={{
      eventsEnabled: true,
      isAnimated: true,
      items: ITEMS,
      selectedItems: [ITEMS[5]],
      hasMedia: false,
      isOpen: false
    }}
    argTypes={{
      downshiftProps: { control: 'object', table: { category: 'Dropdown' } },
      highlightedIndex: { control: 'number', table: { category: 'Dropdown' } },
      isOpen: { table: { category: 'Dropdown' } },
      selectedItems: { table: { category: 'Dropdown' } },
      disabled: { control: 'boolean', table: { category: 'Item' } },
      isDanger: { control: 'boolean', table: { category: 'Item' } },
      hasMedia: { table: { category: 'Story' } },
      items: { name: 'Item[]', table: { category: 'Story' } }
    }}
    parameters={{
      design: [
        {
          name: 'Menu',
          allowFullscreen: true,
          type: 'figma',
          url: 'https://www.figma.com/file/6g87L4FdKZTA3knt3Rsfdx/Garden?node-id=254%3A1241'
        },
        {
          name: 'Item',
          allowFullscreen: true,
          type: 'figma',
          url: 'https://www.figma.com/file/6g87L4FdKZTA3knt3Rsfdx/Garden?node-id=1488%3A28208'
        }
      ]
    }}
  >
    {args => {
      const updateArgs = useArgs()[1];
      const handleSelect = selectedItems => updateArgs({ selectedItems });
      const handleStateChange = changes =>
        changes.hasOwnProperty('isOpen') &&
        changes.type !== Downshift.stateChangeTypes.blurInput /*account for Storybook control*/ &&
        updateArgs({ isOpen: changes.isOpen });
      return <TriggerStory {...args} onSelect={handleSelect} onStateChange={handleStateChange} />;
    }}
  </Story>
</Canvas>

<Markdown>{README}</Markdown>
